<template>
  <div class="app-container">
    <div ref="gantt" class="left-container" />
    <el-dialog title="" :visible.sync="dialogVisable">
      <el-form label-width="80px" size="small">
        <el-form-item label="任务名称">
          <el-input placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker placeholder=""></el-date-picker>
        </el-form-item>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="周期">
              <el-input-number placeholder=""></el-input-number> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="负责人">
              <el-select placeholder="">
                <el-option label="吴春乐" value="吴春乐"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { data } from "../data";
const gantt = window.gantt;
export default {
  data() {
    return {
      dialogVisable: false,
      tasks: {
        data: data,
        links: [
          { id: 1, source: 1, target: 2, type: "0" },
          { id: 2, source: 2, target: 3, type: "0" },
          { id: 3, source: 3, target: 4, type: "0" },
        ],
      },
    };
  },
  created() {
    gantt.clearAll(); // 先清空，再添加，就不会有缓存
  },
  mounted() {
    gantt.config.columns = [
      {
        name: "text",
        label: "任务名称",
        width: 200,
        tree: true,
        resize: true,
      },
      {
        name: "person",
        label: "负责人",
        align: "center",
        template: function () {
          return `<div class="avatar">吴</div>`;
        },
      },
      {
        name: "duration",
        label: "预计",
        align: "center",
        width: 40,
        template: function (e) {
          return e.duration;
        },
      },
      {
        name: "duration",
        label: "消耗",
        align: "center",
        width: 40,
        template: function (e) {
          return e.progress;
        },
      },
      {
        name: "duration",
        label: "剩余",
        align: "center",
        width: 40,
        template: function (e) {
          return (e.duration - e.progress).toFixed(1);
        },
      },
      { name: "add", label: "" },
    ];
    gantt.attachEvent("onTaskDblClick", this.onTaskDblClick);
    gantt.attachEvent("onTaskCreated", this.onTaskDblClick);
    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = true;

    // adding baseline display
    gantt.addTaskLayer({
      renderer: {
        render: function draw_planned(task) {
          if (task.planned_start && task.planned_end) {
            var sizes = gantt.getTaskPosition(
              task,
              task.planned_start,
              task.planned_end
            );
            var el = document.createElement("div");
            el.className = "baseline";
            el.style.left = sizes.left + "px";
            el.style.width = sizes.width + "px";
            el.style.top = sizes.top + gantt.config.bar_height + 13 + "px";
            return el;
          }
          return false;
        },
        // define getRectangle in order to hook layer with the smart rendering
        getRectangle: function (task) {
          if (task.planned_start && task.planned_end) {
            return gantt.getTaskPosition(
              task,
              task.planned_start,
              task.planned_end
            );
          }
          return null;
        },
      },
    });
    //只读模式
    // gantt.config.readonly = true;
    gantt.config.open_tree_initially = true;
    gantt.config.date_format = "%Y-%m-%d %H:%i";
    gantt.config.date_scale = "%M%d日";
    gantt.i18n.setLocale("cn");
    // 在时间线上增加一行年份显示
    gantt.config.subscales = [
      {
        unit: "year",
        step: 1,
        date: "%Y",
      },
    ];

    setTimeout(() => {
      // 初始化
      gantt.init(this.$refs.gantt);
      // 数据解析
      gantt.parse(this.tasks);
    }, 1500);
  },
  methods: {
    onTaskDblClick(id, e) {
      console.log(id, e);
      this.dialogVisable = !this.dialogVisable;
      // return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.left-container {
  height: 600px;
}
</style>
<style lang="scss">
.avatar {
  display: inline-block;
  background: #f56c6c;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  // padding: 8px;
}
</style>
